"use client";
import { CashbackTypes, Rule } from "@/api/cashback";
import Table, { TableHeaderItem } from "@/components/Table";
import { useTranslations } from "next-intl";
import { JSX } from "react";
import styles from "./components/style.module.scss";

interface Props {
    cashbackInfo: CashbackTypes;
}
const Page = (props: Props) => {
    const { cashbackInfo } = props;
    const t = useTranslations("cashback");
    const columns: TableHeaderItem[] = [
        {
            title: <div className={"text-center text-primary-color"}>VIP</div>,
            dataIndex: "level",
            align: "center",
            width: "20%",
            render: (item: Rule) => <div className={"text-[0.13rem] font-bold"}>{item.level}</div>,
        },
        {
            title: <div className={"text-center text-primary-color"}>APOSTA</div>,
            dataIndex: "aposta",
            align: "center",
            width: "40%",
            render: (item: Rule) => (
                <div className={"text-[0.13rem] font-bold"}>{item.aposta} + BRL</div>
            ),
        },
        {
            title: (
                <div className={"text-center text-primary-color"}>CASHBACK</div>
            ) as JSX.Element,
            dataIndex: "cashback",
            align: "center",
            render: (item: Rule) => (
                <div className={"text-[0.13rem] font-bold"}>{item.cashback}%</div>
            ),
        },
    ];
    const loadMore = async () => {
        return Promise.resolve();
    };
    return (
        <>
            <Table
                columns={columns}
                dataSource={cashbackInfo.rules || []}
                loadMore={loadMore}
                hasMore={false}
                isLoadMore={false}
                isBackground={false}
                oddClassName={styles.odd}
                evenClassName={styles.even}
                tdClassName={styles.td}
            />
            {/*<Box*/}
            {/*    className={clsx(*/}
            {/*        "mt-[10px] rounded-[10px] shadow-[0_0_20px_#3796b3_inset]",*/}
            {/*        styles.tableBox*/}
            {/*    )}*/}
            {/*>*/}
            {/*    <div className={"mb-[10px] text-[#00fffc]"}> {t("cashbackStatus")}</div>*/}
            {/*    <Table*/}
            {/*        columns={columns}*/}
            {/*        dataSource={cashbackInfo.rules || []}*/}
            {/*        loadMore={loadMore}*/}
            {/*        hasMore={false}*/}
            {/*        isLoadMore={false}*/}
            {/*        isBackground={false}*/}
            {/*        oddClassName={styles.odd}*/}
            {/*        evenClassName={styles.even}*/}
            {/*        tdClassName={styles.td}*/}
            {/*    />*/}
            {/*</Box>*/}
        </>
    );
};

export default Page;